<template>
  <Topbar />
  <div class="center">
    <!-- 餐厅搜索 -->
    <div class="wandertable">
      <div class="wrapper">
        <div class="left">
          <span>寻找最适合你的美食。</span>
          <span>Wandertable————为您订位</span>
        </div>
        <div class="right">
          <input type="text" placeholder="尝试餐厅或美食">
          <input type="text" placeholder="山西">
          <button>寻找</button>
        </div>
      </div>
    </div>
    <!-- 餐厅推荐 -->
    <div class="recommend">
      <div class="wrapper">
        <div>探索Wandertable的 <a href="">餐厅指南</a></div>
        <div>
          <div class="localtable">在当地最火热的餐厅寻找属于您的桌位</div>
          <div class="chinatable">在全国最受欢迎的一些餐厅预定您的位子</div>
          <div class="showtable">
            <ul>
              <!-- 数据库绑定  餐厅推荐 -->
              <!-- <li v-for=""></li> -->
            </ul>
          </div>
          <!-- 绑定路由 -->
          <button>更多餐厅</button>
        </div>
        <div>
          <div class="everytable">在各个城市下馆子</div>
          <div class="everytable-1">无论到何地旅行，都能享受美食且轻而易举地预定餐厅位子。</div>
          <div class="province">
            <!-- 数据库绑定 -->
            <div>广东</div>
            <div>北京</div>
            <div>上海</div>
            <div>武汉</div>
            <div>苏州</div>
            <div>天津</div>
          </div>
        </div>

      </div>
    </div>
    <!-- 预定介绍 -->
    <div class="introduce">
      <div class="wrapper">
        <div class="introduce-1">
          <div class="text">了解Wandertable餐厅的<a href="">预定平台</a></div>
          <!-- 特点 -->
          <div class="trait">
            <div class="item1">
              <img src="../assets/aboutus1.png" alt="">
              <div class="text1">
                <div>为美食痴狂</div>
                <div>放眼全国，永远在寻找新餐厅的路上</div>
              </div>
            </div>
            <div class="item2">
              <img src="../assets/aboutus2.png" alt="">
              <div class="text2">
                <div>简单易用</div>
                <div>我们让预订餐厅变得简单——通过网页或应用在线预订</div>
              </div>
            </div>
            <div class="item3">
              <img src="../assets/aboutus3.png" alt="">
              <div class="text3">
                <div>持续回馈</div>
                <div>我们通过 <a href="">Wandertable 会员点数</a>为您提供返现奖励。</div>
              </div>
            </div>
          </div>

        </div>
        <div class="useapp">

        </div>
      </div>

    </div>
  </div>
</template>
<script>
import Topbar from '../components/Topbar.vue';

export default {
  components: {
    Topbar
  }
}

</script>
<style scoped lang="scss">
// scss常见语法规则
// 1.在声明序选择器时，需严格选中  &>div:nth()
// 2.变量声明   $color = red   color = $color
// *{
//   margin: 0;
//   padding: 0;
//   text-decoration: none;
// }
.center {
  height: 7000px;
  width: 100%;

  // background-color: red;
  .wandertable {
    background-image: url('../assets/bgi.png');
    width: 100%;
    height: 720px;
    background-size: 100%;
    background-position-y: center;
    background-repeat: no-repeat;

    .wrapper {
      display: flex;
      justify-content: space-between;

      .left {
        padding-top: 200px;

        span {
          display: block;
        }

        &>span:first-child {
          color: rgb(255, 255, 255);
          font-weight: 900;
          font-size: 58px;
        }

        &>span:last-child {
          color: rgb(255, 255, 255);
          font-weight: 700;
          font-size: 20px;
          text-align: left;
          margin-top: 20px;
        }
      }

      .right {
        padding-top: 220px;
        width: 40%;

        &>input:first-child {
          width: 400px;
          height: 56px;
          border: 1px rgb(248, 179, 51) solid;
          border-radius: 12px;
          outline: none;
        }

        &>input:nth-child(2) {
          width: 320px;
          height: 56px;
          border: 1px rgb(248, 179, 51) solid;
          border-top-left-radius: 12px;
          border-bottom-left-radius: 12px;
          margin-top: 20px;
          outline: none;

        }

        button {
          width: 80px;
          height: 58px;
          border: 1px rgb(248, 179, 51) solid;
          border-top-right-radius: 12px;
          border-bottom-right-radius: 12px;
          background-color: rgb(248, 179, 51);
          font-size: 14px;
          font-weight: 600;
          color: rgb(255, 255, 255);
        }

        button:hover {
          background-color: rgb(243, 161, 9);
        }
      }
    }
  }

  .recommend {
    height: 760px;

    .wrapper {
      padding-top: 48px;
      box-sizing: border-box;

      &>div:first-child {
        font-size: 28px;
        font-weight: 700;
        color: rgb(58, 67, 84);

        a {
          color: rgb(248, 179, 51);
        }
      }

      &>div:nth-child(2) {
        height: 420px;
        margin-top: 40px;
        text-align: left;

        .localtable {
          font-size: 25px;
          font-weight: 700;
          color: rgb(58, 67, 84);
          margin-bottom: 8px;
        }

        .chinatable {
          font-size: 18px;
          color: rgba(58, 67, 84, 0.7);
        }

        .showtable {
          height: 290px;
          margin-top: 24px;
        }

        button {
          width: 98px;
          height: 42px;
          color: rgb(248, 179, 51);
          font-weight: 600;
          font-size: 16px;
          border-radius: 8px;
          background-color: #fff;
          box-shadow: none;
          border: 1px solid rgba(58, 67, 84, 0.7);
        }

        button:hover {
          background-color: rgba(248, 179, 51, 0.2);
          border: 1px solid rgba(248, 179, 51, 0.2);
        }


      }

      &>div:nth-child(3) {
        margin-top: 40px;
        text-align: left;
        height: 100px;

        .everytable {
          font-size: 25px;
          font-weight: 700;
          color: rgb(58, 67, 84);
          margin-bottom: 8px;
        }

        .everytable-1 {
          font-size: 18px;
          color: rgba(58, 67, 84, 0.7);
          margin-bottom: 24px;
        }

        .province {
          height: 70px;
          display: flex;
          justify-content: space-between;

          div {
            width: 189px;
            height: 70px;
            background-color: darkgray;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 20px;
            font-weight: 700;
            color: rgb(255, 255, 255);
          }
        }
      }
    }
  }

  .introduce {
    height: 895px;
    padding: 48px 0px;
    box-sizing: border-box;

    .wrapper {
      .introduce-1 {
        .text {
          font-size: 28px;
          font-weight: 700;
          color: rgb(58, 67, 84);

          a {
            color: rgb(248, 179, 51);
          }
        }

        .trait {
          display: flex;
          justify-content: space-between;
          margin-top: 48px;

          .item1 {
            width: 250px;

            img {
              height: 140px;
            }

            .text1 {
              margin-top: 30px;

              &>div:first-child {
                font-size: 20px;
                font-weight: 700;
                color: rgb(58, 67, 84);
              }

              &>div:last-child {
                font-size: 16px;
                font-weight: 400;
                font-style: normal;
                color: rgba(58, 67, 84, 0.9);
                margin-top: 10px;
              }

            }
          }

          .item2 {
            width: 250px;

            img {
              height: 140px;
            }

            .text2 {
              margin-top: 30px;

              &>div:first-child {
                font-size: 20px;
                font-weight: 700;
                color: rgb(58, 67, 84);
              }

              &>div:last-child {
                font-size: 16px;
                font-weight: 400;
                font-style: normal;
                color: rgba(58, 67, 84, 0.9);
                margin-top: 10px;
              }
            }
          }

          .item3 {
            width: 250px;

            img {
              height: 140px;
            }

            .text3 {
              margin-top: 30px;

              &>div:first-child {
                font-size: 20px;
                font-weight: 700;
                color: rgb(58, 67, 84);
              }

              &>div:last-child {
                font-size: 16px;
                font-weight: 400;
                font-style: normal;
                color: rgba(58, 67, 84, 0.9);
                margin-top: 10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
